<template>
  <div class="release">
    <CustomTable type="selection" @onBtnClick="onBtnClick" @setRowClass="setRowClass" height="970rem" v-model:form="searchForm" v-model:selection="selection" :tableHeader="tableHeader" :tableData="tableData">
      <template v-slot:tableTop="{ row }">
        <el-button type="primary" plain @click="add(row)">新增</el-button>
      </template>
      <template v-slot:lastColumn="{ row }">
        <el-button type="primary" plain @click="view(row)">查看</el-button>
        <el-button type="primary" plain @click="edit(row)">修改</el-button>
      </template>
    </CustomTable>
    <CustomDialog v-model:dialogVisible="dialogVisible" @submit="submit">
      <CustomForm title="详细信息" ref="formRef" v-model:form="form" :editable="editable" columns="3"> </CustomForm>
      <CustomForm title="详细信息" ref="formRef2" v-model:form="form2" :editable="editable" columns="3"> </CustomForm>
    </CustomDialog>
  </div>
</template>

<script setup>
import { ref, reactive, onBeforeMount, onMounted, computed, watch, onBeforeUnmount, nextTick } from 'vue'
import { http, fillData } from '@/utils/index.js'
import dayjs from 'dayjs'
// dayjs.extend(duration)
const props = defineProps({})
const dialogVisible = ref(false)
const editable = ref(false)
const formRef = ref()
const selection = ref([])
const searchForm = ref({
  XM: '',
  XB: '',
  JSH: ''
  // RSSJ: [dayjs().date(1).format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')],
  // GYQX: '',
  // apkName: '莱宝'
})
const form = ref({
  XM: '112',
  JSH: '0101',
  ZJHM: '',
  XB: '',
  ZJHM: '',
  XZZXZ: '',
  GZDW: '',
  SG: '',
  TZ: '',
  ZC: '',
  AJBH: '',
  HJD: '',
  LDYJ: ''
})
const form2 = ref({
  XM: '112',
  JSH: '0101',
  ZJHM: '',
  XB: '',
  ZJHM: '',
  XZZXZ: '',
  GZDW: '',
  SG: ''
  // TZ: '',
  // ZC: '',
  // AJBH: '',
  // HJD: '',
  // LDYJ: ""
})

const tableHeader = ref([
  {
    key: 'XM',
    label: '姓名'
    //width: '25%'
  },
  {
    key: 'NL',
    label: '年龄'
    //width: '25%'
  },
  {
    key: 'HJD',
    label: '住址'
    //width: '50%'
  }
])
const tableData = ref([
  {
    XM: '张三',
    NL: '18',
    HJD: '天安云谷601'
  },
  {
    XM: '张三2',
    NL: '18',
    HJD: '天安云谷601'
  },
  {
    XM: '张三3',
    NL: '18',
    HJD: '天安云谷601'
  },
  {
    XM: '张三4',
    NL: '18',
    HJD: '天安云谷601'
  },
  {
    XM: '张三5',
    NL: '18',
    HJD: '天安云谷601'
  },
  {
    XM: '张三6',
    NL: '18',
    HJD: '天安云谷601'
  },
  {
    XM: '张三7',
    NL: '18',
    HJD: '天安云谷601'
  },
  {
    XM: '张三8',
    NL: '18',
    HJD: '天安云谷601'
  },
  {
    XM: '张三9',
    NL: '18',
    HJD: '天安云谷601'
  },
  {
    XM: '张三10',
    NL: '18',
    HJD: '天安云谷601'
  },
  {
    XM: '张三11',
    NL: '18',
    HJD: '天安云谷601'
  },
  {
    XM: '张三12',
    NL: '18',
    HJD: '天安云谷601'
  },
  {
    XM: '张三13',
    NL: '18',
    HJD: '天安云谷601'
  },
  {
    XM: '张三14',
    NL: '18',
    HJD: '天安云谷601'
  },
  {
    XM: '张三15',
    NL: '18',
    HJD: '天安云谷601'
  },
  {
    XM: '张三16',
    NL: '18',
    HJD: '天安云谷601'
  },
  {
    XM: '张三17',
    NL: '18',
    HJD: '天安云谷601'
  }
])
onMounted(() => {
  console.log('释放人员')
})
const add = () => {
  editable.value = true
  dialogVisible.value = true
}
const view = (row) => {
  editable.value = false
  dialogVisible.value = true
  fillData(form.value, row)
}
const edit = (row) => {
  editable.value = true
  dialogVisible.value = true
  fillData(form.value, row)
}
const submit = (params) => {
  console.log(params)
}
const onBtnClick = (type, row, rows) => {
  console.log(type)
  console.log(row)
  console.log(rows)
}
const setRowClass = (row, callback) => {
  // console.log(row)
  if (row.XM == '张三10') {
    callback('blue')
  }
}
</script>
<style lang="scss" scoped>
.release {
  width: 100%;
  height: 100%;
}
::v-deep(.custom-table) {
  .blue {
    td {
      background-color: lightgreen !important;
    }
    .cell {
      color: #fff !important;
    }
  }
}
</style>
